<template>
    <div class = "home-container">
     

    <el-container class="el-container">
        <el-header class="Home_header">
            <div>
                <img src="../assets/duck.png" alt="">
                <span>电商管理后台</span>
            </div>
             <el-button @click='exited' type="primary" class="el_btns_page">退出</el-button>
        </el-header>

        <el-container>
            <el-aside  class=Home_aside :width="isCollapse ?  '64px' : '200px'">
                <div class="Switch_button" @click="Switch_button">
                  | | |
                </div>

            <!-- 侧边框的菜单栏 -->

                <el-menu background-color="#42485b" text-color="#fff" active-text-color="#409eff" :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="jihuodizhi"> 

                <!-- 一级菜单 -->
                <el-submenu :index="item.id + ''" :key = "item.id" v-for="item in menulist" >
                <template slot="title">
                        <i :class="iconObj[item.id]"></i>
                        <span>{{item.authName}}</span>
                </template>
                
                <!-- 二级菜单 -->
                <el-menu-item-group>
                        <el-menu-item :index="'/' + subItem.path + ''" class="el-icon-menu" v-for="subItem in item.children" :key="subItem.id" @click="HlighState('/' + subItem.path)">
                        {{subItem.authName}}
                        </el-menu-item>
                </el-menu-item-group>
                </el-submenu>
                </el-menu>

            </el-aside>
            <el-main class="Home_main">
                <router-view></router-view>
            </el-main>
        </el-container>

    </el-container>

    </div>
</template>


<script>
export default {
    data(){
        return{
            menulist:[],
            iconObj:{
                '125':'el-icon-user',
                '103':'el-icon-thumb',
                '101':'el-icon-shopping-cart-2',
                '102':'el-icon-document-copy',
                '145':'el-icon-s-data',
            },
            //是否折叠
             isCollapse: false,
            //  被激活的链接地址
            jihuodizhi:''

        }
    },
    created(){
        this.getMenuList()
        this.jihuodizhi = window.sessionStorage.getItem('jian')
    },

    methods:{
        exited(){
            window.sessionStorage.clear('token')
            this.$router.push('/login')
        },
       async getMenuList(){
         const {data:res} = await this.$http.get('menus')
         if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
         this.menulist = res.data
        //  console.log(res);
        },
        //点击按钮开关菜单栏
    Switch_button() {
            this.isCollapse = !this.isCollapse
        },
        // 保存链接的激活状态
        HlighState(activePath){
            window.sessionStorage.setItem('jian',activePath)
        }
    }
}
</script>


<style lang='less' scoped>

    .home-container {
        height: 100%;
    }

    .el_btns_page {
        height: 60%;
    }
    
    .el-container {
        height: 100%;
    }

    .Home_header {
        display: flex;
        justify-content:space-between;
        align-items: center;
        background-color: #3c8dbc;
        padding-left: 0;
           >div {
               display: flex;
               font-size: 20px;
               color: #f2f2f2;
               align-items: center;
                span {
                    padding-left: 5px;
                    cursor: pointer;
                }

                img {
                    padding: 10px;
                    border-radius: 50%;
                    cursor: pointer;
                }
           }
    }

    .Home_aside {
        background-color:#42485b;
    }

    .Home_main {
        background-color: #f2f2f2;
    }

    .el-menu {
        border-right: 0;
    }

    .Switch_button {
        display: flex;
        justify-content: center;
        background-color: #333744;
        cursor: pointer;
        color: #f2f2f2;
        padding:5px
    
    }
</style>